<script setup lang="ts">
interface Props {
    title?: string;
    border?: boolean
}
const props = withDefaults(defineProps<Props>(), {
    border: false
});
</script>

<template>
    <div class="x-card-header" :class="{ 'border': border }">
        <div class="x-card-header-left">
            <span class="title"> {{ title }}</span>
        </div>
        <div class="x-card-header-right">
            <slot name="right"></slot>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.x-card-header {

    display: flex;
    align-items: center;

    padding: 20rpx 20rpx;

    //
    &.border {
        border-bottom: 1px solid #efefef;
    }

    &-left {
        flex: 1;
    }

    .title {
        font-size: 32rpx;
        color: #333;
        font-weight: 500;
    }
}
</style>
